import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { Flex, WhiteSpace, List, Checkbox, Icon, WingBlank} from 'antd-mobile';

const ListItem = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

import { FormattedMessage} from 'react-intl';

class App extends React.Component { 

	constructor(props) {
		super(props);	
		this.state = {			
			totalAmount:0
		};	
		this.policyNo = T.urlQuery("policyNo");		
		this.policyId = T.urlQuery("policyId");	
	}

	componentDidMount(){
		const {billList} = this.props;			
        if(!billList || (billList && !billList.length)){
            actions.billInfo.requestBillList();
        }
		
		let second = 0;
		let interval = setInterval(()=>{
		if(this.billItemList && this.billItemList.length>0){
		this.setState({
			totalAmount:this.billItemList[0].billAmount
		})
		clearInterval(interval);
		}
		second ++;
		if(second > 5 * 60 *5){
		clearInterval(interval);
		}
		},200)
    }

	billDetail=(billId) =>{//跳转到账单详情
		console.log(billId)
		actions.routing.push({
            pathname: 'bill-detail',
            search: '?renewalOrderNo=' + billId + "&renewalStatus=" + 1 +"&policyId=" + this.policyId
        })
	}

	policyDetail=(policyNo) =>{//跳转到保单详情	
		actions.routing.push({
            pathname: 'policy-detail',
            search: "?policyNo=" + policyNo
        })
	}

	payBill= () =>{//立即缴费
		T.showLoading();
		var payParam = {
			packageName: this.billListDetail.policyName,
			policyNo: this.billListDetail.policyNo,
			renewalOrderNo:this.billItemList[0].renewalOrderNo,
			amt:this.billItemList[0].billAmount,
			dueDate:this.billItemList[0].renewalDate
		}
		var payUrl =  T.weixinHost + "/bill/renewal/pay.html";
		console.log(payUrl)
		
		var inputTemp = '<input type="hidden" className="none" name={name} value={value}  >';
		var inputs = [];
		var item;
		for (var key in payParam){
			item = T.template(inputTemp, {
				name: '"'+key +'"',
				value: '"'+payParam[key]+'"'
			});
			inputs.push(item);
		}		
		T.get("connectForm").innerHTML = inputs.join("");					
		T.get("connectForm").action = payUrl;
		setTimeout(function(){
			document.connectForm.submit();
			setTimeout(function (){
				T.hideLoading();
			},5000);
		},0);
	}
   
	
	
	render() {		
		const {billList} = this.props;
		this.billListDetail = T.getAttrObject(billList,"policyNo",this.policyNo)[0] ||{};
		this.billItemList = this.billListDetail.billList ||[];
				
		return (<div className="bill-pay">
		<form id="connectForm" name="connectForm" className="none" method="post"></form>
		<Flex className="borderBottom flexWrap">
            <Flex.Item>{this.billListDetail.policyName}</Flex.Item>
            <Flex.Item className="policyNo diy_color" onClick={()=>this.policyDetail(this.billListDetail.policyNo)}>{this.billListDetail.policyNo}</Flex.Item>
        </Flex>

		<List>
				{this.billItemList.map((i,index)=> (
				<div key={i.renewalOrderNo} className="wrap">				
				<ListItem arrow="horizontal" >
					<Checkbox    checked={index == 0} disabled={index !=0 }   id={index}/>
					   {i.renewalDate}               <FormattedMessage id='amount_not_pay' defaultMessage='待缴金额'/>{i.billAmount}
				</ListItem>
				<div className="clickBtn" onClick={() => this.billDetail(i.renewalOrderNo)} ></div>
				</div>
				))}        
		</List>

		<p className="text"><FormattedMessage id='pay_tip' defaultMessage='一次只能缴最近一期的保费账单'/></p>

		<div className="bot flex flex-between flex-y">
				<div className="total"><FormattedMessage id='all_count' defaultMessage='合计'/>：{this.state.totalAmount}</div>
				<div className="payBtn diy_background" onClick={this.payBill}><FormattedMessage id='pay_right_now' defaultMessage='立即缴费'/></div>
		</div>

	  	</div>)
	}
}

export default connect(state => {
    return state.billInfo;
  })(App)